<template>
	<view class="bill-box">
		<view class="bill-item" v-for="(item,index) in billList" :key="index">
			<view class="left">
				<view class="title">
					{{ getInvoiceTypeText(item.invoice_type) }}
				</view>
				<view class="disc">
					账单编号：{{ item.invoice_no }}
				</view>
				<view class="disc">
					{{ getDateText(item.create_at * 1000) }}
				</view>
			</view>
			<view class="money reduce" v-if="item.invoice_type == 2">
				{{ (item.invoice_fee / 100).toFixed(2) }}
			</view>
			<view class="money plus" v-if="item.invoice_type == 1">
				+{{ (item.invoice_fee / 100).toFixed(2) }}
			</view>
		</view>
		<view class="list-loadmore">
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
	import utils from "../utils/index.js"
	export default{
		components:{
	
		},
		computed:{
			isDisabled(){
				return 0
			},
		},
		data() {
			return {
				status: 'loadmore',
				page_index: 0,
				billList: [],
				has_more: true
			}
		},
		onLoad() {
			this.getData()
		},
		onReachBottom() {
			this.getData()
		},
		methods:{
			getDateText(_date){
				return utils.getDateText(_date)
			},
			getInvoiceTypeText(_invoice_type){
				switch (_invoice_type){
					case 2:
						return '提现'
					default:
						return '订单结算'
				}
			},
			getData(){
				if (!this.has_more){
					return
				}
				this.page_index++
				let that = this
				this.$api.fenxiao.getBillList({page:that.page_index}).then(res => {
					if (res.page_info.page_index > 0){
						that.billList = that.billList.concat(res.list)
					}
					else {
						that.billList = res.list
					}
					that.has_more = res.page_info.has_more
					that.status = that.has_more ? 'loadmore' : 'nomore';
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
	.bill-box{
		padding: 0 30upx;
	}
	.bill-item{
		display: flex;
		justify-content: space-between;
		background-color: #FFF;
		margin-top: 30upx;
		padding: 30upx;
		font-size: 28upx;
		border-radius: 10upx;
		
		.title{
			font-size: 32upx;
		}
		.disc{
			color: #909399;
			margin-top: 10upx;
		}
		
		.money{
			font-size: 32upx;
			
			&.reduce{
				color: #2f8f00;
			}
			&.plus{
				color: #ff4544;
			}
		}
	}
</style>
